<template>
  <div>
    <app-head></app-head>
    <app-body>
      <el-tabs v-model="activeNameTop" tab-position="left" @tab-click="handleClickTop">
        <el-tab-pane v-for="topic in topics" :name="topic.id" :label="topic.name" style="width:1150px;">
          <div class="topic">
            <div style="display: flex; align-items: flex-start;">
              <div class="topic-title">
                <div>
                  <img width="100px"
                       src="https://pic1.zhimg.com/v2-40e779d5c5e6bcebda41e92d50594618.jpg?source=57bbeac9"
                       alt="">
                </div>
                <div>
                  <h2>{{ topic.name }}</h2>
                  <p>暂无话题描述</p>
                </div>
              </div>
<!--              <div style="margin: 40px 350px">-->
<!--                 <span style="background-color: #00feff;padding: 15px; border-radius:20%; color: #fff;"-->
<!--                       @click="toggleFollow(topic)">{{ topic.isFollowed ? '取消关注' : '关注' }}</span>-->
<!--              </div>-->
            </div>

          </div>
          <div class="topic-content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane v-for="(item) in list" :label="item.name" :name="item.id">
                <ul v-for="item in discussList">
                  <li>
                    <div class="topic-content-div" v-html="item.topic.topicName"></div>
                  </li>
                  <li class="topic-content-li" style=" display: flex;align-items: center;justify-content: space-evenly;">
                    <div class="topic-content"
                         style=" font-size: 14px; width:85%;margin:auto;height: 100px;overflow: auto;"
                         v-html="item.discussContent"></div>
                    <div @click="looking(item)" style="font-size: 14px">查看全文</div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="等待回答" name="3">
                <ul>
                  <li class="topic-content-li" v-for="item in topicList">
                    <div class="topic-content-div">{{ item.topicName }}</div>
                    <button class="topic-content-button" @click="answer(item)">写回答</button>
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-tab-pane>
      </el-tabs>
    </app-body>
    <app-foot></app-foot>
  </div>
</template>

<script>
import AppFoot from "@/components/common/AppFoot.vue";
import AppHead from "@/components/common/AppHeader.vue";
import AppBody from "@/components/common/AppPageBody.vue";

export default {
  name: "index",
  components: {
    AppHead,
    AppBody,
    AppFoot
  },
  data() {
    return {
      topics: [
        {id: 1, name: '茶叶', isFollowed: false},
        {id: 2, name: '茶叶冲泡', isFollowed: false},
        {id: 3, name: '茶叶功效', isFollowed: false},
        {id: 4, name: '茶叶存放', isFollowed: false}
      ],
      list: [
        {id: 1, name: "讨论"},
        {id: 2, name: "精华"},
        // {id:3,name:"等待回答"},
      ],
      activeName: 1,
      activeNameTop: 1,
      topicList: [],
      discussList: [],
    };
  },
  mounted() {
    this.shifouguanzhu()
    this.handleClick()
  },
  methods: {
    toggleFollow(topic) {
      topic.isFollowed = !topic.isFollowed;
      if (topic.isFollowed) {
        this.$api.guanzhu({'topicId': topic.id}).then(response => {
          console.log(response)
        })
      } else {
        this.$api.quxiaoguanzhu({'topicId': topic.id}).then(response => {
          console.log(response)
        })
      }
      // location.reload();
    },
    shifouguanzhu(query) {
      this.$api.shifouguanzhu(query).then(response => {
        console.log(response);
        response.data.forEach(item => {
          this.topics[item.topicId - 1].isFollowed = true;
        })
      })
    },
    handleClick() {
      console.log(this.activeNameTop)
      this.topicList = []
      this.discussList = []
      if (this.activeName == 3) {
        this.$api.getTopicList().then(response => {
          console.log(response)
          response.data.list.forEach(item => {
            if (item.topicType == this.activeNameTop) {
              this.topicList.push(item)
            }
          })
          console.log("==============================================================")
          console.log(this.topicList)
        })
      } else if (this.activeName == 2) {
        this.$api.getDiscussList({isGood: 1}).then(response => {
          response.data.forEach(item => {
            this.$api.getTopic({id: item.topicId}).then(response => {
              item.topic = response.data
              console.log(item)
              if (item.topic.topicType == this.activeNameTop) {
                this.discussList.push(item)
              }
            })

          })
          console.log("==============================================================")
          console.log(this.discussList)
        })
      } else if (this.activeName == 1) {
        this.$api.getDiscussList({isGood: 0}).then(response => {
          response.data.forEach(item => {
            this.$api.getTopic({id: item.topicId}).then(response => {
              item.topic = response.data
              console.log(item)
              if (item.topic.topicType == this.activeNameTop) {
                this.discussList.push(item)
              }
            })
          })
          console.log("==============================================================")
          console.log(this.discussList)
        })
      }
    },
    handleClickTop(tab, event) {
      this.handleClick()
      // console.log(activeNameTop);
      // this.activeNameTop = Number(tab.index)+1;
    },
    answer(item) {
      this.$router.push({path: "/answer", query: {id: item.topicId}});
    },
    looking(item) {
      this.$router.push({path: "/looking", query: {item: item}});
    }
  }
}
</script>

<style scoped>
h1 {
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

button {
  margin-left: 10px;
}

.topic {
  //border: 1px solid #1a1a1a;
}

.topic-title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.topic-content {

}

topic-content-li {
}

.topic-content-div {
  font-size: 18px;
  font-weight: 600;
  color: #191b1f;
  line-height: 1.6;
  margin-bottom: -4px;
  margin-top: -4px;
  word-break: break-word;
}

.topic-content-button {
  border-radius: 0;
  background-color: #409EFF;
  border: none;
  color: #e8e8e8;
  margin: 10px 0 0 0;
}
</style>